<div class="conFlow_property">
  <el-form label-width="80px" :model="formData">
    <div style="justify-content: center;display: flex;">
      <el-button @click="loc_visible = true" style=" width: 120px;
      height: 120px;">
        <div class="common-pic" v-if="!formData.locationPic">
          <el-icon :size="30">
            <Picture />
          </el-icon>
          <span>地点</span>
        </div>
        <div v-else >
          <img class="node-icon" id="dynamicImage" :src="formData.locationPic" style="width: 100%;height:100%">
        </div>
      </el-button>
    </div>

    <div style="margin: 20px 0" />
    <el-form-item label="图标题">
      <el-input v-model="formData.graphRes_title"></el-input>
    </el-form-item>
    <el-form-item label="地点名称">
      <el-input v-model="formData.locationName"></el-input>
    </el-form-item>
    <el-form-item label="地点id">
      <el-input v-model="formData.locationID"></el-input>
    </el-form-item>
    <el-form-item label="角色位置">
      <el-switch v-model="formData.rolePos" class="mb-2" active-text="右" inactive-text="左" />
    </el-form-item>



    <div v-for="(item,index) in formData.convFlowList">
      <div class="conv-container">
        <div class="button-container">
          <el-button @click="openRole(index)"  style="width: 120px; height: 120px;">
            <div class="common-pic" v-if="!item.role_pic">
              <el-icon class="node-user"></el-icon>
              <span>角色</span>
            </div>
            <div v-else>
              <img class="node-icon" id="dynamicImage" :src="item.role_pic" style="width: 100%;height:100%">
            </div>
          </el-button>
        </div>
        <div class="form-items">
          <el-form-item label="图ID">
            <el-input v-model="item.convFlow_id" disabled></el-input>
          </el-form-item>
          <el-form-item label="角色名称">
            <el-input v-model="item.role_name"></el-input>
          </el-form-item>
          <el-form-item label="角色id">
            <el-input v-model="item.role_id"></el-input>
          </el-form-item>
          <el-form-item label="对话内容">
            <el-input v-model="item.convFlow_content" rows=5 maxlength="300" show-word-limit type="textarea"></el-input>
          </el-form-item>
        </div>
      </div>
      <el-divider  />
    </div>



    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>

    <!-- 角色对话框 -->
    <ConvRoleDialog v-model="role_visible" :show-close="false" :treeData="treeData"
      @sureConvRolePic="sureConvRolePic" @closeRolePanel="closeRolePanel"></ConvRoleDialog>
    <LocDialog v-model="loc_visible" :show-close="false" :treeData="treeData"
      @sureLocPic="sureLocPic" @closeLocPanel="closeLocPanel"></LocDialog>




  </el-form>


</div>